
@import "color";
@import "public";

.inbox_box{
    padding: 0 30px 30px;
    background: #fff;
    border-radius: 5px;
    .layui-tab {
        .layui-tab-title {
            height: 70px;
            li {
                padding: 0;
                margin-right: 90px;
                font-size: 16px;
                line-height: 70px;
            }
            .tabs_li::after{
                left: 26px;
            }
            .tabs_li2::after{
                left: 36px;
            }
            .layui-this::after {
                border: none;
                border-radius: 0;
                width: 30px;
                border-bottom: 4px solid $theme-color;
                border-radius: 2px;
                top: 29px
            }
        }
    }
    .layui-form-label{
        width: 75px;
        text-align: left;
        padding: 9px 15px 9px 0;
    }
    .layui-input-inline{
        width: 200px!important;
    }
    .inbox_count{
        margin-top: 10px;
        font-size: 16px;
        color: $title2-color;
        span{
            padding: 5px 8px;
            background: #f84c42;
            display: inline-block;
            color: #fff;
            margin: 0 15px;
            border-radius: 10px
        }
    }
    .appraisal_inboxtable{
        margin-top: 30px;
        thead{
            tr{
                background: #f2f4f5;
                th{
                    border-left: none;
                    border-right: none
                }
            } 
        }
        tbody{
            tr{
                td{
                    border-left: none;
                    border-right: none
                }
                .look_report{
                    width: 100px;
                    height: 30px;
                    line-height: 30px;
                    text-align: center;
                    border-radius: 20px;
                    cursor: pointer;
                    color: #183884;
                    border: 1px solid #183884;
                    margin: 10px auto;
                }
                .look_report:hover{
                    background: #183884;
                    color: #fff
                }
                .look{
                    width: 78px;
                    height: 30px;
                    line-height: 30px;
                    text-align: center;
                    border-radius: 20px;
                    color: #00a0e9;
                    border: 1px solid #00a0e9;
                    margin: 10px auto;
                    cursor: pointer;
                }
                .look:hover{
                    background: #00a0e9;
                    color: #fff
                }
                .dom{
                    width: 220px;
                    margin: 0 auto;
                    display: flex;
                    justify-content: space-between;
                    .inbox_btn{
                        width: 100px;
                        height: 30px;
                        line-height: 30px;
                        text-align: center;
                        border-radius: 20px;
                        cursor: pointer;
                    }
                    .ck{
                        color: #183884;
                        border: 1px solid #183884
                    }
                    .ck:hover{
                        color: #fff;
                        background: #183884;
                    }
                    .yq{
                        color: #f4556f;
                        border: 1px solid #f4556f
                    }
                    .yq:hover{
                        color: #fff;
                        background: #f4556f;
                    }
                }
            }
            tr:hover{
                background: #fafafa;
            }
        }
    }
    .all_chack{
        margin-top: 50px;
        margin-left: 38px;
        .all_out{
            margin-left: 20px;
            color: #f4556f
        }
    }
    .page_mt{
        margin-top: -32px;
    }
    .page_mt2{
        margin-top: 40px;
    }
}
.appraisal_invite_box{
    padding: 30px;
    background: #fff;
    border-radius: 5px;
    .layui-form-label{
        width: 90px;
        text-align: left;
        padding: 9px 15px 9px 0;
    }
    .layui-input-inline{
        // width: 200px!important;
    }
    .add{
        display: inline-block;
        height: 38px;
        line-height: 38px;
        width: 120px;
        text-align: center;
        background: #42b2f8;
        border-radius: 5px;
        color: #fff;
        cursor: pointer;
    }
    .choose_text{
        font-size: 14px;
        color: $text-color
    }
    .choose_ul{
        margin-top: 20px;
        li{
            display: inline-block;
            margin-right: 20px;
            padding: 7px 10px;
            border: 1px solid $info-color;
            color: $info-color;
            border-radius: 5px;
            cursor: pointer;
        }
        .choos_this{
            background: $theme-color;
            color: #fff;
            border: none
        }
    }
    .invite_info{
        color: $info-color;
        h3{
            font-size: 14px;
            margin-bottom: 10px;
        }
        p{
            line-height: 2;
        }
    }
    .invite_btn{
        margin-top: 20px;
    }
}
.appraisal_invite_way{
    margin-top: 30px;
    padding: 30px;
    background: #fff;
    border-radius: 5px;
    .title{
        color: $text-color;
        margin-bottom: 25px;
        span{
            color: $info-color;
            margin-left: 10px;
        }
    }
    .invite{
        width: 85px;
        height: 38px;
        line-height: 38px;
        text-align: center;
        background: #42b2f8;
        border-radius: 5px;
        display: inline-block;
        color: #fff;
        cursor: pointer;
    }
    .qrcode{
        width: 150px;
        height: 150px;
        img{
            width: 100%;
            height: 100%;
        }
    }
}
.appraisal_info_box{
    padding: 30px;
    background: #fff;
    border-radius: 5px;
    .appraisal_info_title{
        font-size: 16px;
        color: $title-color;
        font-weight: bold;
        position: relative;
        padding-left: 20px;
    }
    .appraisal_info_title::after{
        content: '';
        position: absolute;
        height: 16px;
        width: 3px;
        background: #42b2f8;
        top: 3px;
        left: 0;
    }
    .appraisal_info_con{
        font-size: 14px;
        margin-top: 10px;
        line-height: 1.8;
        text-indent: 2em;
        color: $text-color
    }
    .appraisal_info_flex{
        display: flex;
        justify-content: space-between;
        margin-top: 30px;
        .info_flex_box{
            width: 28%;
            // height: 280px;
            padding: 30px 0;
            background: #fff;
            border: 1px solid #ececec;
            position: relative;
            overflow: hidden;
            .posi_ab{
                width: 80px;
                height: 40px;
                position: absolute;
                top: 20px;
                right: -24px;
                background: #ececec;
                border-radius: 20px;
                color: #37474f;
                line-height: 40px;
                font-weight: bold;
                font-size: 16px;
                padding-left: 20px;
            }
            .posi_con{
                width: 290px;
                height: 200px;
                margin: auto;
            
                // text-align: center;
                .posi_con_img{
                    width: 80px;
                    height: 80px;
                    margin: 0 auto;
                    img{
                        width: 100%;
                        height: 100%;
                    }
                }
                .title{
                    font-size: 16px;
                    color: $title-color;
                    margin-top: 10px;
                    text-align: center;
                }
                .posi_con_ul{
                    margin: 10px auto 0;
                    text-align: left;
                    li{
                        font-size: 14px;
                        color: $text-color;
                        list-style: disc;
                        line-height: 2;
                    }
                }
                .posi_con1{
                    width: 150px;
                }
                .posi_con2{
                    width: 200px;
                }
                .posi_con3{
                    width: 270px;
                }
            }
        }
        .info_flex_box:hover{
            box-shadow: 0 .4375rem 1.075rem rgba(0, 0, 0, 0.1);
        }
    }
    .appraisal_if{
        li{
            display: flex;
            font-size: 14px;
            margin-top: 25px;
            p{
                margin-left: 15px;
                color: $text-color;
                line-height: 1.8;
            }
        }
    }
}
.appraisal_statistics{
    .set_title{
        height: 40px;
        line-height: 40px;
        border-radius: 5px;
        border: 1px dotted #f9753e;
        padding: 0 30px;
        color: $info-color;
        font-size: 14px;
        margin-bottom: 10px;
        background: #fff9f7;
    }
    .top_statistics{
        background: #fff;
        padding: 30px;
        border-radius: 5px;
        .tp_chat_box{
            display: flex;
            justify-content: space-between;
            .job_statistics{
                height: 200px;
                width: 40%;
            }
            .tp_info_box{
                height: 120px;
                margin: auto 0;
                width: 58%;
                display: flex;
                justify-content: space-between;
                .four_box{
                    width: 22%;
                    height: 120px;
                    border-radius: 10px;
                    border: 1px dotted #ececec;
                    // padding: 25px;
                    .top{
                        display: flex;
                        justify-content: space-between;
                        font-size: 16px;
                        color: $text-color;
                        padding: 25px 15px;
                        img{
                            width: 22px;
                            height: 25px;
                        }
                    }
                    .bottom{
                        font-size: 30px;
                        color: $btitle-color;
                        padding: 0 15px;
                    }
                }
            }
        }
    }
    .statistics{
        padding: 30px;
        background: #fff;
        border-radius: 5px;
        margin-top: 30px;
        position: relative;
        .top_right_img{
            position: absolute;
            top: -10px;
            left: -12px;
            width: 118px;
            height: 118px;
            background-image: url('../../dist/images/appraisal/stat_title.png');
            background-repeat: no-repeat;
            background-size: contain;
        }
        .top_right_img2{
            position: absolute;
            top: -10px;
            left: -12px;
            width: 118px;
            height: 118px;
            background-image: url('../../dist/images/appraisal/invite_eva.png');
            background-repeat: no-repeat;
            background-size: contain;
        }
        .three_box{
            display: flex;
            justify-content: space-between;
            margin-top: 15px;
            .t_box{
                width: 30%;
                height: 150px;
                background-repeat: no-repeat;
                background-size: cover;
                .top{
                    display: flex;
                    justify-content: space-between;
                    padding: 35px 40px 0;
                    font-size: 20px;
                    color: #fff;
                    img{
                        margin-top: -8px;
                        width: 40px;
                        height: 40px;
                    }
                }
                .bottom{
                    color:#fff;
                    font-size: 38px;
                    padding: 15px 40px 35px;

                }
            }
            .t_box1{
                background-image: url('../../dist/images/appraisal/stat_bg_1.png');
            }
            .t_box2{
                background-image: url('../../dist/images/appraisal/stat_bg_2.png');
            }
            .t_box3{
                background-image: url('../../dist/images/appraisal/stat_bg_3.png');
            }
        }

        }
        .chat_list{
            // height: 450px;
            margin-top: 30px;

    }
    .ciclejob_chat{
        margin-top: 30px;
        display: flex;
        justify-content: space-between;
        width: 100%;
        .cicle_chat_box{
            width: 45%;
            height: 500px;
        }
    }
}
.w200{
    width: 200px!important;
}
.appraisal_info_title{
    font-size: 16px;
    color: $title-color;
    font-weight: bold;
    position: relative;
    padding-left: 20px;
    margin-left: 11px;
}
.appraisal_info_title::after{
    content: '';
    position: absolute;
    height: 16px;
    width: 3px;
    background: #42b2f8;
    top: 3px;
    left: 0;
}
@media screen and(max-width:1680px){
    .appraisal_statistics .top_statistics .tp_chat_box .tp_info_box .four_box .top{
        padding: 25px 15px;
    }
    .appraisal_statistics .top_statistics .tp_chat_box .tp_info_box .four_box .bottom{
        padding: 0 15px
    }
}
@media screen and(max-width:1440px){
    .appraisal_statistics .top_statistics .tp_chat_box{
        display: block;
    }
    .appraisal_statistics .top_statistics .tp_chat_box .job_statistics{
        width: 100%;
    }
    .appraisal_statistics .top_statistics .tp_chat_box .tp_info_box{
        width: 100%;
        margin-top: 30px;
    }
}
@media screen and (max-width:1440px){
    .appraisal_statistics .statistics .three_box .t_box .top{
        padding: 25px 40px 0;
        font-size: 16px;
    }
    .appraisal_statistics .statistics .three_box .t_box .bottom{
        font-size: 26px
    }
}
@media screen and(max-width:1680px){
    .appraisal_statistics .top_statistics .tp_chat_box .tp_info_box .four_box .top{
        font-size: 14px
    }
}

.appraisal_tool{
    .tool_tabs{
        height: 40px;
        background: #fff;
        border-radius: 20px;
        width: 728px;
        .tool_tabs_ul{
            padding: 0 30px;
            li{
                height: 40px;
                line-height: 40px;
                margin-right: 30px;
                padding: 0 20px;
                color: #526069;
                border-radius: 20px;
                display: inline-block;
                cursor: pointer;
            }
            .active{
                background: #42bdf6;
                color: #fff
            }
        }
    }
    .tool_tabs_con{
        .tabs_con{
            display: none;
            .banner{
                // height: 240px;
       
                background-repeat: no-repeat;
                background-size: cover;
                margin-top: 30px;
                padding: 40px 0;
                .name{
                    font-size: 24px;
                    color: #fff;
                    font-weight: bold;
                    margin-left: 70px;
                    span{
                        font-size: 16px;
                        margin-left: 20px;
                    }
                }
                h2{
                    font-size: 16px;
                    color:#fff;
                    margin-top: 25px;
                    margin-left: 70px;

                }
                h3{
                    font-size: 14px;
                    color: #fff;
                    margin-top: 25px;
                    margin-left: 70px;

                }
                .flex_btn{
                    display: flex;
                    justify-content: space-between;
                    margin-top: 25px;
                    .tool_zc{
                        font-size: 14px;
                        color: #fff;
                        margin-right: 70px;
                        margin-top: 15px;
                    }
                    .tool_ben{
                        display: flex;
                        margin-left: 70px;
                        .tool_ben_com{
                            width: 120px;
                            height: 40px;
                            border-radius: 20px;
                            text-align: center;
                            line-height: 40px;
                            border: 1px solid #fff;
                            cursor: pointer;
                        }
                        .yq{
                            color: #fff
                        }
                        .yq:hover{
                            background: #fff;
                            color: $text-color
                        }
                        .yb{
                            background: #4f7cf3;
                            color: #fff;
                            margin-left: 20px;
                        }
                        .yb:hover{
                            background: #7996e6;
                        }
                    }
                }
            }
            .bg1{
                background-image: url('../../dist/images/appraisal/banner1.png');
            }
            .bg2{
                background-image: url('../../dist/images/appraisal/banner2.png');
            }
            .bg3{
                background-image: url('../../dist/images/appraisal/banner3.png');
            }
            .bg4{
                background-image: url('../../dist/images/appraisal/banner4.png');
            }
            .big_title{
                margin-top: 60px;
                font-size: 24px;
                color: $title-color;
                // font-weight: bold;
                text-align: center;
            }
            .big_title_con{
                font-size: 14px;
                margin-top: 30px;
                color: $text-color;
                text-align: center;
            }
            .tool_describe{
                background: #fff;
                padding: 30px;
                border-radius: 5px;
                margin-top: 60px;
                .describe{
                    font-size: 14px;
                    color: $text-color;
                    margin-top: 20px;
                    line-height: 27px;
                    margin-left: 30px;
                }
                .describe_li{
                    font-size: 14px;
                    color: $text-color;
                    margin-top: 20px;
                    list-style: disc;
                    margin-left: 34px;
                }
            }
            .tool_advantage_box{
                margin-top: 60px;
                width: 100%;
                display: flex;
                justify-content: space-between;
                .advantage_box{
                    width: 22%;
                    height: 300px;
                    .top{
                        height: 50px;
                        line-height: 50px;
                        text-align: center;
                        color: #fff;
                        background: #42bdf6;
                        border-top-right-radius: 20px;
                        border-top-left-radius: 20px;
                    }
                    .con{
                        height: 250px;
                        background: #fff;
                        padding:20px 30px 0;
                        font-size: 14px;
                        color: $text-color;
                        line-height: 30px;
                        overflow: auto
                    }
                }
            }
          .appraisal_info_flex{
                display: flex;
                justify-content: space-between;
                margin-top: 60px;
                .info_flex_box{
                    width: 28%;
                    // height: 280px;
                    padding: 30px 0;
                    background: #fff;
                    border: 1px solid #ececec;
                    position: relative;
                    overflow: hidden;
                    .posi_ab{
                        width: 80px;
                        height: 40px;
                        position: absolute;
                        top: 20px;
                        right: -24px;
                        background: #ececec;
                        border-radius: 20px;
                        color: #37474f;
                        line-height: 40px;
                        font-weight: bold;
                        font-size: 16px;
                        padding-left: 20px;
                    }
                    .posi_con{
                        width: 290px;
                        height: 200px;
                        margin: auto;
                    
                        // text-align: center;
                        .posi_con_img{
                            width: 80px;
                            height: 80px;
                            margin: 0 auto;
                            img{
                                width: 100%;
                                height: 100%;
                            }
                        }
                        .title{
                            font-size: 16px;
                            color: $title-color;
                            margin-top: 10px;
                            text-align: center;
                        }
                        .posi_con_ul{
                            margin: 10px auto 0;
                            text-align: left;
                            li{
                                font-size: 14px;
                                color: $text-color;
                                list-style: disc;
                                line-height: 2;
                            }
                        }
                        .posi_con1{
                            width: 150px;
                        }
                        .posi_con2{
                            width: 200px;
                        }
                        .posi_con3{
                            width: 270px;
                        }
                    }
                }
                .info_flex_box:hover{
                    box-shadow: 0 .4375rem 1.075rem rgba(0, 0, 0, 0.1);
                }
            }
        }
    }
}
.appra_invite{
    .layui-tab {
        .layui-tab-title {
            height: 70px;
            width: 98%;
            margin: 0 auto;
            li {
                padding: 0;
                margin-right: 90px;
                font-size: 16px;
                line-height: 70px;
            }
            .tabs_li::after{
                left: 49px;
            }
            .tabs_li2::after{
                left: 36px;
            }
            .layui-this::after {
                border: none;
                border-radius: 0;
                width: 30px;
                border-bottom: 4px solid $theme-color;
                border-radius: 2px;
                top: 29px
            }
        }
    }
}